<template>
  <div class="login-container">
    <div class="login-box">
      <div class="logo-wrapper">
        <div class="logo">
          <gui-image
            src="https://cphimg.leyoo888.com/dev/upload/supplier/2025-04-29/196800a65401a8d5.png"
          ></gui-image>
        </div>
      </div>

      <div class="input-group">
        <input
          type="text"
          v-model="account"
          placeholder="请输入手机号"
          @blur="validateAccount"
        />
        <div class="clear-icon" v-if="account" @click="clearAccount">
          <span class="close-icon-ic">✕</span>
        </div>
      </div>

      <div class="input-group">
        <input
          v-model="password"
          :password="showPassword"
          placeholder="请输入密码"
        />
        <div style="padding: 20rpx" @click.stop="clearPassword">
          <div class="clear-icon" v-if="password">
            <span class="close-icon-ic">✕</span>
          </div>
        </div>
        <div style="padding: 20rpx" @click.stop="togglePasswordVisibility">
          <div class="eye-icon" style="background: none">
            <gui-image
              :width="40"
              :height="40"
              :src="
                showPassword
                  ? 'https://cphimg.leyoo888.com/dev/upload/supplier/2025-04-29/1968035d9622a20c.png?x-oss-process=style/yasuo25'
                  : 'https://cphimg.leyoo888.com/dev/upload/supplier/2025-04-29/1968035cac02c0c6.png?x-oss-process=style/yasuo25'
              "
              alt="切换密码显示"
            />
          </div>
        </div>
      </div>
      <!-- 身份切换卡片 -->
      <div class="identity-cards">
        <div
          class="identity-card"
          :class="{ active: loginType === 'supplier' }"
          @click="loginType = 'supplier'"
        >
          <div class="card-icon">
            <span class="card-icon-inner">供</span>
          </div>
          <div class="card-text">
            <div class="card-title">供应商</div>
            <div class="card-desc">供应商入口</div>
          </div>
          <div class="card-check" v-if="loginType === 'supplier'">✓</div>
        </div>

        <div
          class="identity-card"
          :class="{ active: loginType === 'store' }"
          @click="loginType = 'store'"
        >
          <div class="card-icon">
            <span class="card-icon-inner">店</span>
          </div>
          <div class="card-text">
            <div class="card-title">门店</div>
            <div class="card-desc">门店管理入口</div>
          </div>
          <div class="card-check" v-if="loginType === 'store'">✓</div>
        </div>
      </div>

      <button class="login-btn" @click="debounce(login, 500)">立即登录</button>

      <div class="forgot-password" @click="forgotPassword">忘记密码</div>
    </div>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance, nextTick } from "vue";
import { login as loginApi, loginStore } from "@/api/login";
import {
  getToken,
  setToken,
  setLoginType,
  getLoginType,
  setSupplierRoles,
} from "@/utils/vmeitime-http/localStorage.js";
import { showToast } from "@/utils/helper";
import { validPhone } from "@/utils/validate";
import { onLoad } from "@dcloudio/uni-app";
const { proxy } = getCurrentInstance();
// 响应式数据
const account = ref("");
const password = ref("");
const showPassword = ref(false);
const loginType = ref("supplier");
// 方法
const validateAccount = () => {
  if (!validPhone(account.value)) return showToast("请输入正确的手机号");
};

const togglePasswordVisibility = () => {
  showPassword.value = !showPassword.value;
  proxy.$forceUpdate();
};

const clearAccount = () => {
  account.value = "";
};
const clearPassword = () => {
  password.value = "";
  proxy.$forceUpdate();
};

const login = async () => {
  if (account.value === "" || !validPhone(account.value))
    return showToast("请输入正确的手机号");
  if (password.value === "") return showToast("请输入密码");
  // 发送登录请求
  const res =
    loginType.value === "supplier"
      ? await loginApi({
          account: account.value || "",
          password: password.value || "",
        })
      : await loginStore({
          account: account.value || "",
          password: password.value || "",
        });
  if (!res) return showToast("登录失败,请检查是否填错");
  setRoles(loginType.value, res);
  // 记忆上一次的路径，如果登录成功，跳转到上一次的路径
  const pages = getCurrentPages();
  //兼容打印订单扫过来第一次登录的情况
  if (
    (pages.length > 1 && getLoginType() === loginType.value) ||
    (pages.length > 1 && !getLoginType())
  ) {
    setLoginType(loginType.value);
    uni.navigateBack();
    return;
  }
  setLoginType(loginType.value);
  loginTo(loginType.value);
};
const loginTo = (type) => {
  if (type === "supplier")
    return uni.redirectTo({
      url: "/pages/supplier/supplier",
    });
  uni.redirectTo({
    url: "/pagesShop/store/storeHome",
  });
};

const setRoles = async (type, res) => {
  // if (type === "supplier") {
  //   setToken(res.jwtAuth);
  //   setSupplierRoles(res.permission); // 双重保险 防止获取不到的时候
  //   getApp().globalData.rolesObj = res.permission;
  //   console.log(getApp().globalData.rolesObj);
  //   return;
  // }
  // setToken(res);
  setToken(res.jwtAuth);
  setSupplierRoles(res.permission); // 双重保险 防止获取不到的时候
  getApp().globalData.rolesObj = res.permission;
};

const forgotPassword = () => {
  uni.navigateTo({
    url: "/pages/login/forget?type=" + loginType.value,
  });
};
onLoad(() => {
  if (getLoginType() && getToken()) {
    loginTo(getLoginType());
  }
});
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  height: 100vh;
}

.login-box {
  width: 90%;
  max-width: 800rpx;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 60rpx 40rpx;
}

.logo-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 80rpx;
}

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.input-group {
  position: relative;
  margin-bottom: 40rpx;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 20rpx;
  display: flex;
  align-items: center;
}

input {
  width: 100%;
  border: none;
  outline: none;
  padding: 20rpx 80rpx 20rpx 10rpx;
  font-size: 16px;
}

.clear-icon,
.eye-icon {
  position: absolute;
  right: 20rpx;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  width: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #bdb2b2;
  border-radius: 50%;
  z-index: 88;
  z-index: 88;
  font-size: 18rpx;
  color: #fff;
  text-align: center;
  align-items: center;
}

.eye-icon {
  right: 80rpx;
}

.login-btn {
  width: 100%;
  height: 90rpx;
  text-align: center;
  background-color: #0091ff;
  color: #fff;
  font-size: 32rpx;
  line-height: 46rpx;
  border-radius: 10rpx;
  margin-bottom: 50rpx;
  border: none;
}

.forgot-password {
  text-align: center;
  color: #999;
  margin-bottom: 40rpx;
  cursor: pointer;
}

.reg-phone-btn {
  text-align: center;
  background-color: #666;
  color: white;
  padding: 20rpx;
  border-radius: 8rpx;
  cursor: pointer;
}

/* 身份卡片样式 */
.identity-cards {
  display: flex;
  justify-content: space-between;
  margin: 40rpx 0;
  gap: 20rpx;
}

.identity-card {
  width: 48%;
  padding: 30rpx;
  border-radius: 16rpx;
  background-color: #f8f8f8;
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  transition: all 0.3s;
  border: 4rpx solid transparent;
  gap: 10rpx;
}

.identity-card.active {
  border-color: #0091ff;
  background-color: rgba(0, 145, 255, 0.05);
}

.card-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #ddd;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
}

.card-icon-inner {
  font-size: 18px;
  font-weight: bold;
  color: #666;
}

.active .card-icon {
  background-color: #0091ff;
}

.active .card-icon-inner {
  color: white;
}

.card-text {
  flex: 1;
}

.card-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 4px;
}

.card-desc {
  font-size: 12px;
  color: #999;
}

.card-check {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #0091ff;
  font-weight: bold;
}

.login-btn {
  width: 100%;
  padding: 12px;
  background-color: #0091ff;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  margin-top: 10px;
  margin-bottom: 15px;
}

.close-icon-ic {
  position: relative;
  top: -1px;
}
</style>
